<template>
  <div class="serch_container">
    <div class="input_container flex justify-center">
      <el-input
        v-model="searchKeyword"
        style="width: 400px"
        size="large"
        placeholder="发现资源"
        @keydown.enter="handleSearch"
      >
        <template #append>
          <el-button type="primary" :icon="Search" @click="handleSearch"/>
        </template>
      </el-input>
      <el-button round @click="resetSearch" style="margin-left: 10px; margin-top: 5px"
      >重置
      </el-button
      >
    </div>
    <div class="tab_container bg-white flex gap-5 pa-1 mt-15">
      <div
        v-for="item in panelList"
        :key="item.id"
        :class="['cursor-pointer', 'pa-2', { tab_item: activeName === item.id }]"
        @click="handleChangeTab(item.id)"
      >{{ item.name }}
      </div>
    </div>
    <div class="search_result_container bg-white mt-5 pa-5">
      <template v-if="activeName === 2">
        <el-table :data="taskList" stripe style="width: 100%">
          <el-table-column prop="taskName" label="任务名称" width="180" size="40">
            <template #default="scope">
              <el-tag
                :type="'primary'"
                disable-transitions
              >{{ scope.row.taskName }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="info" label="操作日志" width="380"/>
          <el-table-column prop="userName" label="操作人" width="180"/>
          <el-table-column prop="level" label="日志级别" width="180"/>
          <el-table-column prop="createTime" label="操作时间"/>
        </el-table>
        <div class="mt-2 flex justify-end">
          <el-pagination
            background
            layout="total,prev, pager, next"
            :total="searchPagination.total"
            v-model:current-page="currentPage"
            @update:current-page="handlePageChange"
          />
        </div>
      </template>

      <template v-if="activeName === 1">
        <el-table :data="userList" stripe style="width: 100%">
          <el-table-column prop="userName" label="操作人" width="180">
            <template #default="scope">
              <el-tag
                :type="'success'"
                disable-transitions
              >{{ scope.row.userName }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="info" label="操作日志" width="380"/>
          <el-table-column prop="level" label="日志级别" width="180"/>
          <el-table-column prop="taskName" label="任务名称" width="180"/>
          <el-table-column prop="createTime" label="操作时间"/>
        </el-table>
        <div class="mt-2 flex justify-end">
          <el-pagination
            background
            layout="total,prev, pager, next"
            :total="searchPagination.total"
            v-model:current-page="currentPage"
            @update:current-page="handlePageChange"
          />
        </div>
      </template>
    </div>
  </div>
</template>
<script lang="ts" setup>
import {ref, onMounted, reactive} from 'vue'
import {Search} from '@element-plus/icons-vue'
import {useRoute} from 'vue-router'
import {Pagination, TaskEntity} from "@/composables/api/task";

const route = useRoute()

const searchKeyword: any = ref(route.query.searchText)
const handleSearch = () => {
  getData()
}
const props = withDefaults(
  defineProps<{
    list: TaskEntity[]
    pagination: Pagination
    typeId: string | number
  }>(),
  {
    list: () => [],
    pagination: () => ({pageSize: 10, pageNum: 1, total: 0}),
  },
)

const activeName = ref(2)
const panelList = [
  {
    name: '任务日志',
    id: 2,
  },
  {
    name: '用户日志',
    id: 1,
  },
]

const handleChangeTab = (id) => {
  activeName.value = id
  searchPagination.pageNum = 0
  getData()
}

const searchPagination = reactive({
  pageSize: 10,
  pageNum: 1,
  total: 0,
})

const taskList = ref([])
const userList = ref([])
const getData = async () => {
  const queryData = {
    keyword: searchKeyword.value,
    size: searchPagination.pageSize,
    page: searchPagination.pageNum - 1 < 0 ? 0 : searchPagination.pageNum - 1,
    type: activeName.value,
  }
  await service.task.getLogBySearchKey(queryData).then((res) => {
    if (activeName.value === 1) {
      userList.value = res.list
    } else {
      taskList.value = res.list
    }
    searchPagination.total = res.total
  })
}

const handleRefresh = (pagination?: any) => {
  if (pagination) {
    searchPagination.pageSize = 10
    searchPagination.pageNum = pagination.pageNum
  }
  getData()
}
const $emit = defineEmits(['refresh'])

// const currentPage = computed({
//   get() {
//     return props.pagination.pageNum
//   },
//   set(val) {
//     $emit('refresh', { pageNum: val })
//     searchPagination.pageNum=val
//     getData();
//   }
// })

const handlePageChange = (newPage) => {
  searchPagination.pageNum = newPage
  getData();
}

// 重置搜索框
const resetSearch = () => {
  searchKeyword.value = ''
  getData()
}

onMounted(() => {
  getData()
})
</script>
<style lang="scss" scoped>
.serch_container {
  .tab_container {
    border-radius: 5px;

    .tab_item {
      border-bottom: 3px solid #409eff;
    }
  }
}
</style>
